<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="css/login.css" rel="stylesheet">
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
</head>

<body>
<div id="loginDiv" style="height: 350px">
    <form action="" id="form">
        <h1 id="loginMsg">登 录</h1>
        <div id="errorMsg">请输入正确数据</div>
        <p>用户名：<input id="username" name="username" type="text"></p>
        <p>密    码：<input id="password" name="password" type="password"></p>
        <p>记住密码：<input id="remember" name="remember" type="checkbox"></p>
        <div id="subDiv">
            <input type="button" class="button" id="buttons" value="登录">
            <input type="reset" class="button" value="重置">&nbsp;&nbsp;&nbsp;
            <a href="stuSignup.html">没有账号？</a>
        </div>
    </form>
</div>

<script>
    document.getElementById("buttons").onclick = function (){
        //1. 给按钮绑定单击事件
        var formData = {
            sname:"",
            password:""//在html里，创建的是一个js对象，使用axios发送的时候会自动封装成json，因此userDesc可以不加双引号
        };
        //获取表单数据
        let usernmae = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        //赋值
        formData.sname=usernmae;
        formData.password=password;//this指向的是window,值如果不存在window里面,用this会报错的

        console.log(formData)

        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/zt12-26/login",
            data:formData //json格式
        }).then(function (resp) {
            //获取数据
            if (resp.data.code == 200){
                window.location.href="http://localhost:8080/zt12-26/sign.html"
            }else {
                alert("添加错误");
            }
        })

    }
</script>

</body>
</html>
